<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小马配餐</title>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<script>
			var iScale = 1;
			iScale = iScale / window.devicePixelRatio;
			document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')
		</script>
		<!--动态设置文字大小-->
		<script>
			var iWidth = document.documentElement.clientWidth;
			document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
		</script>
		<style type="text/css">
			#time{
				position: fixed;
				width: 100%;
				height:100%;
				background: rgba(0,0,0,0.5);
			}
			.time-main{
				width: 13.4rem;
				height:8rem;
				background: #FFFFFF;
				margin:9rem auto;
				position: relative;
			}
			.time-head{
				height: 1.6rem;
				border-bottom: 0.04rem solid #999999;
			}
			.time-head img{
				height:0.8rem;
				width: 0.8rem;
				margin-top: 0.4rem;
				margin-left: 0.2rem;
				float: left;
			}
			.time-head span{
				display: block;
				height:1.6rem;
				float: left;
				margin-left: 0.2rem;
				text-align: center;
				line-height: 1.6rem;
				font-size: 0.6rem;
				color: #202020;
			}
			.time-left{
	            width: 6.7rem;
	            height: 4.5rem;
	            overflow: hidden;
	            float: left;
			}
			.time-right{
	            width: 6.7rem;
	            height: 4.5rem;
	            overflow: hidden;
	            float: right;
			}
			.time-ul{
				width: 5rem;
	            height: 1.5rem;
	            margin: 1.5rem auto;
			}
			.time-ul .sl{
	            width: 5rem;
	            height:1.5rem;
	            font-size: 0.6rem;
	            color: #cccccc;
	            text-align: center;
	            line-height: 1.5rem;
	            float: left;
	        }
	        .left-kuang{
	        	position: absolute;
                top: 3rem;
                left: 1rem;
                width: 5rem;
                height: 1.5rem;
                border-bottom: 0.02rem solid #999999;
                border-top: 0.02rem solid #999999;
            }
            .right-kuang{
            	position: absolute;
                top: 3rem;
                left: 7.5rem;
                width: 5rem;
                height: 1.5rem;
                border-bottom: 0.02rem solid #999999;
                border-top: 0.02rem solid #999999;
            }
            .xiaan{
            	position: absolute;
            	bottom: 0;
            	left: 0;
            	width:100%;
            	height: 1.8rem;
            	border-top: 1px solid #999999;
            }
            .xiaan p{
            	display: inline-block;
            	width: 50%;
            	height: 1.8rem;
            	border-right:0.02rem solid  #999999;
            	font-size: 0.6rem;
            	color: #000000;
            	text-align: center;
            	line-height: 1.8rem;
            }
            .xiaan span{
            	display: inline-block;
            	width: 49%;
            	height: 1.8rem;
            	font-size: 0.6rem;
            	color: #000000;
            	text-align: center;
            	line-height: 1.8rem;
            }
            .xiaan span a{
            	display: inline-block;
            	width: 49%;
            	height: 1.8rem;
            	font-size: 0.6rem;
            	color: #000000;
            	text-align: center;
            	line-height: 1.8rem;
            }
            .swiper-slide-active{
				width: 8.8rem!important;
                height: 1.5rem!important;
	            color: #000000 !important;
	            width: 5rem!important;
            }
		</style>
		
	</head>
  <body>
      <div id="time">
      	<div class="time-main">
      	  <div class="time-head">
      	  	 <img src="img/7527.png" alt="" />
      	  	 <span>选择送餐到达时间</span>
      	  </div>
      	  <div class="left-kuang"></div>
      	  <div class="time-left">
      	  	<div class="time-ul">
   			  <div class='swiper-wrapper '>
   				<div class="swiper-slide sl">
   				    <span>1</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>2</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>3</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>4</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>5</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>6</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>7</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>8</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>9</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>10</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>11</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>12</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>13</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>14</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>15</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>16</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>17</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>18</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>19</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>20</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>21</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>22</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>23</span>
				 </div>
   				<div class="swiper-slide sl ">
   				    <span>24</span>
   				</div>
   			  </div>
   		    </div>    
      	  </div>  <!--//left-->
      	  <div class="right-kuang"></div>
      	  
      	  
      	  <div class="time-right">
      	  	<div class="time-ul">
   			  <div class='swiper-wrapper '>
   			  	<div class="swiper-slide sl">
   				    <span>00</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>01</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>02</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>03</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>04</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>05</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>06</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>07</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>08</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>09</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>10</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>11</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>12</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>13</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>14</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>15</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>16</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>17</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>18</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>19</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>20</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>21</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>22</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>23</span>
				 </div>
   				<div class="swiper-slide sl ">
   				    <span>24</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>25</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>26</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>27</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>28</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>29</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>30</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>31</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>32</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>33</span>    
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>34</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>35</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>36</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>37</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>38</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>39</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>40</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>41</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>42</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>43</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>44</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>45</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>46</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>47</span>
				 </div>
   				<div class="swiper-slide sl ">
   				    <span>48</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>49</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>50</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>51</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>52</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>53</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>54</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>55</span>
   				</div>
				<div class="swiper-slide sl ">
					<span>56</span>
				</div>
   				<div class="swiper-slide sl ">
   				    <span>57</span>
   				</div>
   				<div class="swiper-slide sl ">
   				    <span>58</span>
   				</div>
   				<div class="swiper-slide sl">
   				    <span>59</span>
   				</div>
   			  </div>
   		    </div>    
      	  </div>  <!--//left--> 
      	  <div class="xiaan">
      	  	 <p>取消</p>
      	  	 <span><a href="querendingdan.jsp">确认</a></span>
      	  </div>
      	</div>
      </div>
      <script src="js/jquery-1.11.1.js"></script>
      <script src="js/swiper.js"></script>
      <script type="text/javascript">
      	//轮播图、、
        var mySwiper = new Swiper ('.time-ul', {
    		direction: 'vertical',//你的每一个屏的局中方式，水平为horizontal，垂直为vertical,默认为水平为horizontal
    		loop: false,//是否循环，就是无缝滚动
    		autoplay: 0,//自动轮转的时间间隔
        })
        
        $('.xiaan span').click(function(){
        	var tt=$('.time-left .swiper-slide-active span').text();
        	var t=$('.time-right .swiper-slide-active span').text();
        	alert(tt)
        	alert(t)
        	
        })
      </script>
  </body>
</html>
